<template>
	<view class="fans-follow-main">
		<view class="return-view">
			<uni-icons type="arrow-left" size="30" @click="returnPreviewPage"></uni-icons>
		</view>
		<view class="select-fan-guanzhu">
			<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text"
				activeColor="#66596b"></uni-segmented-control>
			<view class="guanzhu-fans-content">
				<!-- 我的粉丝 -->
				<view v-show="current === 1">
					<view v-if="myFans.length > 0">
						<view class="fans-list-item" v-for="item in myFans" :key="item.userAid">
							<view class="fans-avatar-username" @click="toUserPage(item)">
								<view class="fans-avatar">
									<image :src="item.avatar" mode="aspectFit"></image>
								</view>
								<view class="fans-username">
									{{item.userName}}
								</view>
							</view>
							<view class="guanzhu-chat-btn" @click="clickBtn(item)">
								<button type="default">{{item.btnText}}</button>
							</view>
						</view>
					</view>
					<view v-else class="empty-fans-view">
						<image src="@/static/image/fans_empty.png" mode="aspectFit"></image>
						<view class="empty-fans">
							还没有人关注您呢，快去活跃活跃吧，让更多人关注你！
						</view>
					</view>
				</view>
				<!-- 我的关注 -->
				<view v-show="current === 0">
					<view v-if="myFollows.length > 0">
						<view class="fans-list-item" v-for="item in myFollows" :key="item.userAid">
							<view class="fans-avatar-username" @click="toUserPage(item)">
								<view class="fans-avatar">
									<image :src="item.avatar" mode="aspectFit"></image>
								</view>
								<view class="fans-username">
									{{item.userName}}
								</view>
							</view>
							<view class="guanzhu-chat-btn" @click="clickBtn(item)">
								<button type="default">{{item.btnText}}</button>
							</view>
						</view>
					</view>
					<view v-else class="empty-fans-view">
						<image src="@/static/image/empty_box.png" mode="aspectFit"></image>
						<view class="empty-fans">
							您还没有关注任何人，快去关注吧！
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getFollowsAndFans,followerUser } from '@/request/user';
	export default {
		data() {
			return {
				items: ['我的粉丝', '我的关注'],
				current: 0,
				myFans: [{
						userAid: 1,
						avatar: 'https://img0.baidu.com/it/u=645606765,1278668075&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800',
						userName: '兔兔最可爱',
						btnText: '关注'
					},
					{
						userAid: 2,
						avatar: 'https://img2.baidu.com/it/u=753554730,338496702&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800',
						userName: '疆屿用户23434',
						btnText: '关注'
					},
					{
						userAid: 3,
						avatar: 'https://img0.baidu.com/it/u=3430786044,814387293&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800',
						userName: '星星跌入梦境',
						btnText: '关注'
					},
					{
						userAid: 4,
						avatar: 'https://img2.baidu.com/it/u=482934478,751652016&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
						userName: '月亮是我啃弯的',
						btnText: '关注'
					},
					{
						userAid: 5,
						avatar: 'https://img2.baidu.com/it/u=2985483279,4066751157&fm=253&fmt=auto&app=138&f=JPEG?w=440&h=440',
						userName: '专业发呆二十年',
						btnText: '聊天'
					}
				],
				myFollows: [{
						userAid: 1,
						avatar: 'https://img1.baidu.com/it/u=1221751778,1544069917&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=506',
						userName: '卖女孩的小火柴',
						btnText: '已关注'
					},
					{
						userAid: 2,
						avatar: 'https://img1.baidu.com/it/u=257854502,119824407&fm=253&fmt=auto&app=138&f=JPEG?w=281&h=500',
						userName: '我和我的五个亿都晕船',
						btnText: '已关注'
					},
					{
						userAid: 3,
						avatar: 'https://img2.baidu.com/it/u=2985483279,4066751157&fm=253&fmt=auto&app=138&f=JPEG?w=440&h=440',
						userName: '专业发呆二十年',
						btnText: '聊天'
					},
					{
						userAid: 4,
						avatar: 'http://img.duoziwang.com/2018/06/2018010154183796.jpg',
						userName: '早上好派大星',
						btnText: '已关注'
					},
					{
						userAid: 5,
						avatar: 'https://img1.baidu.com/it/u=2034866949,2477225358&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1061',
						userName: '差点长成帅哥',
						btnText: '已关注'
					},
				],
			};
		},
		onLoad(options) {
			// 获取上一个页面传过来的参数
			this.getOptions(options);
			
			// 获取这个页面的所有信息
			this.getFollowsAndFansFunc(options);

		},
		methods: {
			
			// 获取这个页面的所有信息
			getFollowsAndFansFunc(options){
				const params = {
					userAid: options.userAid
				}
				
				getFollowsAndFans(params).then(res=>{
					// console.log(res);
					this.myFans = res.data.data.myFans;
					this.myFollows = res.data.data.myFollows;
				})
			},

			// 获取上一个页面传过来的参数
			getOptions(options) {
				if (options.userAid === String(uni.getStorageSync("userAid"))) {
					// 当前登录用户就是当前这个页面的用户，查询当前登录用户的粉丝和关注就好了
					this.items = ['我的关注', '我的粉丝'];
				} else {
					this.items = ['Ta关注', 'Ta的粉丝'];
				}
				if (options.menuName === '关注') {
					this.current = 0;
				} else {
					this.current = 1;
				}
			},

			onClickItem(e) {
				// console.log(e);
				if (this.current != e.currentIndex) {
					this.current = e.currentIndex;
				}
			},

			// 返回上一页
			returnPreviewPage() {
				uni.navigateBack()
			},

			// 点击头像或者用户名去用户主页
			toUserPage(item) {
				uni.navigateTo({
					url: `/pages/tabBar/template/userDetailPage?aid=${item.userAid}`
				})
			},

			// 点击按钮，关注他，如果已经关注了，按钮文字就会显示聊天，点击就会跳转
			clickBtn(item) {
				console.log(item);
				if(item.btnText === '关注'){
					const param = {
						userAid: item.userAid,
					}
					followerUser(param).then(res=>{
						console.log(res);
						if(res.data.code === 10000){
							uni.showToast({
								title: '关注成功',
								icon: 'none'
							})
						}else {
							uni.showToast({
								title: '关注失败,请稍后再试...',
								icon: 'none'
							})
						}
					}).catch(err=>{
						console.error(err);
						uni.showToast({
							title: '关注失败,请稍后再试...',
							icon: 'none'
						})
					})
				}else if(item.btnText === '聊天'){
					uni.navigateTo({
						url: `/pages/friendsChat/chatPage/chatRoomPage?userAid=${item.userAid}`
					})
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.fans-follow-main {
		.return-view {
			margin-left: 30rpx;
			margin-top: 60rpx;
			// background-color: #aa00ff;
		}

		.select-fan-guanzhu {
			margin-top: 50rpx;
			width: 80%;
			margin-left: auto;
			margin-right: auto;

			.guanzhu-fans-content {
				margin-top: 30rpx;

				.empty-fans-view {
					text-align: center;

					.empty-fans {
						margin-top: 400rpx;
						font-size: 23rpx;
						color: #6c6c6c;
					}

					image {
						margin-top: 100rpx;
						width: 300rpx;
						height: 300rpx;
						opacity: 0.7;
					}
				}


				.fans-list-item {
					margin-top: 40rpx;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;

					.fans-avatar-username {
						display: flex;
						align-items: center;

						.fans-avatar {
							image {
								width: 100rpx;
								height: 100rpx;
								border-radius: 50%;
							}
						}

						.fans-username {
							margin-left: 20rpx;
						}
					}

					.guanzhu-chat-btn {

						// background-color: #484848;
						button {
							width: 150rpx;
							height: 60rpx;
							font-size: 26rpx;
							border-radius: 60rpx;
							border: 1px solid #484848;
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: center;
							color: #555555;
						}
					}
				}
			}
		}
	}
</style>